﻿@{
    Layout = "~/Views/Shared/_Form.cshtml";
}
@model Raffles.OA.Data.User
<link href="~/Content/plugin/ztree/css/metroStyle/metroStyle.min.css" rel="stylesheet" />
<link href="~/Content/plugin/ztree/core/treeSelect.css" rel="stylesheet" />
<form class="form-horizontal m" role="form">
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">用户姓名<font class="red">*</font></label>
        <div class="col-xs-12 col-sm-4">
            @Html.TextBoxFor(model => model.RealName, new { @class = "form-control required", @placeholder = "请输入用户姓名" })
        </div>
        <label class="control-label col-xs-12 col-sm-2">所属部门<font class="red">*</font></label>
        <div class="col-xs-12 col-sm-4">
            <div class="treeSelect"></div>
            @Html.Hidden("TreeId", Model.DepartmentId)
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">登录账号<font class="red">*</font></label>
        <div class="col-xs-12 col-sm-4">
            @Html.TextBoxFor(model => model.Account, new { @class = "form-control required", @placeholder = "请输入登录账号" })
        </div>
        <label class="control-label col-xs-12 col-sm-2">用户角色<font class="red">*</font></label>
        <div class="col-xs-12 col-sm-4">
            @Html.DropDownList("RoleId", null, "请选择角色", htmlAttributes: new { @class = "form-control select2 required",})
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">手机号码</label>
        <div class="col-xs-12 col-sm-4">
            @Html.TextBoxFor(model => model.MobilePhone, new { @class = "form-control", @placeholder = "请输入手机号码" })
        </div>
        <label class="control-label col-xs-12 col-sm-2">操作率</label>
        <div class="col-xs-12 col-sm-4">
            @Html.TextBoxFor(model => model.OperateRate, new { @class = "form-control", @type = "number", @placeholder = "形如0.12/500" })
            <span class="help-block m-b-none text-red"><i class="fa fa-info-circle"></i> 百分比请用小数表示(0.15)</span>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">颜色</label>
        <div class="col-xs-12 col-sm-4">
            <select id="color" col="Color" class="form-control">
                <option value="">请选择</option>
            </select>
        </div>
        <label class="control-label col-xs-12 col-sm-2">就职岗位</label>
        <div class="col-xs-12 col-sm-4">
            <select id="positionIds" col="PositionIds" multiple class="form-control">
            </select>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">备注说明</label>
        <div class="col-sm-10">
            @Html.TextAreaFor(model => model.Description, new { @class = "form-control", @placeholder = "请输入备注说明" })
        </div>
    </div> 
</form>
<script src="~/Content/plugin/ztree/js/jquery.ztree.all.min.js"></script>
<script src="~/Content/plugin/ztree/core/treeSelect.js"></script>
<script>
    var id = frame.request("id");
    $(function () {
        $('.select2').select2();
        $("#isManager").frameCheckBox("setValue", '@Model.IsManager' == 'True' ? 1 : 0);
        frame.ajax({
            url: '@Url.Content("/Manage/Department/GetDepartTreeSelect")',
            type: "get",
            success: function (result) {
                if (result.success) {
                    $(".treeSelect").treeSelect({
                        data: result.data,
                        placeholder: "请选择所属部门",
                        inputId: "txt"
                    })
                    var zTreeObj = $.fn.zTree.getZTreeObj("_treeDomtxt");
                    //zTreeObj.expandAll(true);
                    if (@Model.Id> 0 &&@Model.DepartmentId> 0) {
                        zTreeObj.selectNode(zTreeObj.getNodeByParam("id", @Model.DepartmentId));
                        $('#txt').val(zTreeObj.getNodeByParam("id", @Model.DepartmentId).name);
                    }

                }
            }
        });
        $('form').validate({
            rules: {
                txt: { required: true },
                MobilePhone: { isPhone: true },
                Email: { email: true }

            }
        });
        $("#positionIds").frameSelect({
            url: '@Url.Action("GetPositionList", "Position")',
            key: "Id",
            value: "Name",
            search: true
        });
        if (!!'@Model.PositionId') {
            $("#positionIds").frameSelect("setValue", '@Model.PositionId');
        }
        $("#color").frameSelect({
            url: "/Common/GetDictionaryCodeByCode?code=Color"
        }); 
        if (!!'@Model.Color') {
            $("#color").frameSelect("setValue", '@Model.Color');
        } 
    })
    function saveForm() {
        if ($('form').validate().form()) {
            frame.ajax({
                url: '@Url.Content("/Manage/User/SaveForm")',
                type: "post",
                data: $('form').formSerialize(),
                success: function (obj) {
                    if (obj.success) {
                        frame.msgSuccess(obj.message);
                        parent.searchGrid();
                        frame.closeDialog();
                    }
                    else {
                        frame.msgError(obj.message);
                    }
                }
            });
        }
    }
</script>